<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>综合练习-折线图绘制</title>
</head>

<body>
    <canvas id="can" width="800" height="800" style="border:solid 1px red;"></canvas>
    <script>
        var c = document.getElementById("can");
        var objClient = {
            x: c.clientWidth / 2,
            y: c.clientHeight / 2
        }
        var ctx = document.getElementById("can").getContext("2d");
        ctx.globalAlpha = 1 // 透明度
        ctx.moveTo(objClient.x, 0);
        ctx.lineTo(objClient.x, c.clientHeight);
        ctx.moveTo(0, objClient.y);
        ctx.lineWidth = 1;
        ctx.lineTo(c.clientWidth, objClient.y);
        ctx.strokeStyle = "green";
        ctx.fillText(document.title, 10, 20)
        ctx.stroke();
        ctx.beginPath();

        function drawLine() {
            var saleData = [{
                month: 1,
                money: 100
            }, {
                month: 2,
                money: 40
            }, {
                month: 3,
                money: 30
            }, {
                month: 4,
                money: 200
            }, {
                month: 5,
                money: 220
            }, {
                month: 6,
                money: 12
            }, {
                month: 7,
                money: 20
            }, {
                month: 8,
                money: 36
            }, {
                month: 9,
                money: 72
            }, {
                month: 10,
                money: 53
            }, {
                month: 11,
                money: 20
            }, {
                month: 12,
                money: 80
            }]
            var origin = {
                x: c.width / 2 - 250,
                y: c.height / 2 + 150
            }

            /**绘制横坐标 x**/
            ctx.strokeStyle = "black"
            ctx.moveTo(origin.x, origin.y);
            ctx.lineTo(origin.x + 500, origin.y);
            ctx.stroke();
            /**绘制y轴**/
            ctx.beginPath();
            ctx.moveTo(origin.x, origin.y);
            ctx.lineCap = "round";
            ctx.lineTo(origin.x, origin.y - 300);
            ctx.stroke();
            /**绘制刻度yAxios**/
            var yUint = 300 / 30;
            for (var j = 0, len = yUint; j < len; j++) {
                ctx.beginPath();
                ctx.lineWidth = 1;
                ctx.moveTo(origin.x, origin.y - (j + 1) * 30);
                ctx.lineTo(origin.x + 5, origin.y - (j + 1) * 30);
                ctx.lineCap = "round";
                ctx.stroke();
                ctx.beginPath();
                ctx.font = "10px";
                ctx.textAlign = "right";
                ctx.fillText((j + 1) * 30, origin.x - 10, origin.y - (j + 1) * 30 + 5);


            }

            /**绘制刻度xAxios**/
            var xUint = 500 / 12;
            for (var i = 0, len = saleData.length; i < len; i++) {
                ctx.beginPath();
                ctx.moveTo(origin.x + (i + 1) * xUint, origin.y);
                ctx.lineTo(origin.x + (i + 1) * xUint, origin.y - 5);
                ctx.lineCap = "round";
                ctx.lineWidth = 1;
                ctx.strokeStyle = "black";
                ctx.stroke();
                /**绘制坐标文本**/
                ctx.beginPath();
                ctx.font = "10px Arial bold";
                ctx.fillStyle = "black";
                ctx.textAlign = "center";
                ctx.fillText(i + 1 + "月份", origin.x + (i + 1) * xUint - 3, origin.y + 20)
                drawData(i);
            }

            function drawData(i) {
                let data = saleData[i];
                /**绘制小点**/
                ctx.beginPath();
                ctx.arc(origin.x + (i + 1) * xUint, origin.y - data.money, 3, 0, 2 * Math.PI);
                ctx.fillStyle = "red";
                ctx.fill();

                /**绘制折线**/
                ctx.beginPath();
                ctx.strokeStyle = "red";
                ctx.lineWidth = 2;
                ctx.moveTo(origin.x + (i + 1) * xUint, origin.y - data.money);

                ctx.lineTo(origin.x + (i + 2) * xUint, origin.y - (saleData[i + 1] && saleData[i + 1].money));
                ctx.lineCap = "round";
                ctx.stroke();

                /** 绘制文本 **/
                ctx.beginPath();
                ctx.font = "10px Arial bold";
                ctx.textAlign = "center";
                ctx.fillStyle = "green";
                ctx.fillText(data.money + "万元", origin.x + (i + 1) * xUint, origin.y - data.money - 10);



            }
        }
        drawLine();
    </script>
</body>